<template>
    <div>
        <div>
            <div class="top-header border-bottom" style="position: fixed;width: 100%;top: 0;">
                <!--<div class="top-header border-bottom">-->
                <div class="top-back"><a @click="goBack"></a></div>
                <h2 class="f36">选择服务器</h2>
                <div class="top-right"></div>
            </div>
            <div class="search-container" @click="showInputMask=true" style="position: fixed;width: 100%;top: .97rem;">
                <!-- background-image: none margin-left: 0  这里添加样式的原因是处理和list-cl.css（列表页） 样式冲突-->
                <div class="search-box bg-fff" style="background-image: none">
                    <input type="text" placeholder="请输入服务器名称" maxlength="20" class="f30" v-model.trim="searchInput" style="margin-left: 0">
                    <span v-if="searchInput.length" @click="searchInput = ''" class="clear1"></span>
                </div>
            </div>
            <div style="width: 100%; height: 2.12rem"></div>
            <!-- 搜索列表 -->
            <div class="search-result f28"
                 v-show="searchInput.length && (searchList && searchList.length) || !searchList">
                <div class="mg-mt-double-bounce" v-if="!searchList && searchInput.length">
                    <mt-spinner type="double-bounce"></mt-spinner>
                </div>
                <ul v-if="searchList">
                    <li v-for="item in searchList">
                        <a class="border-bottom" @click="searchServerClick(item)">
                            <span>{{item.mainServiceName}}</span>
                            <span style="float: right; color: gray">{{item.mainAreaName}}</span>
                        </a>
                    </li>
                </ul>
            </div>
            <!--没有搜索到指定的区服的样式start-->
            <div class="new-search-empty text-center" v-if="searchList && !searchList.length">
                <img src="~images/common/search-empty.png" alt="">
                <p class="text-center f26 color-b2 mt-20">抱歉，没有找到“<span class="search-content">{{searchInput}}</span>”的相关区服
                </p>
                <a v-if="showCustom && custom.gameServer" class="color-fff f30 a-commit bg-m1 mt-30"
                   href="javascript:void(0)" @click="commitSearchInput">直接提交</a>
            </div>
            <!--没有搜索到指定的区服的样式end-->
            <!-- 搜索历史幕布 -->
            <div class="mask" v-show="showInputMask&&!searchInput.length" @click="showInputMask=false"></div>
            <div class="search-history" v-show="showInputMask&&!searchInput.length">
                <div class="container-ms bg-fff">
                    <div class="game-list ">
                        <ul class="clearfix ">
                            <li v-show="historyCheckedArr.length === 0"><a href="JavaScript:void(0)">暂无搜索历史</a></li>
                            <li v-for="(item, index) in historyCheckedArr">
                                <a @click="historyClick(item, index)">{{item.client.name + '/' + item.server.name}}</a>
                                <span @click="clearHistory(index)" class="clear2"></span></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 客户端列表和服务器列表 -->
            <div v-show="searchInput.length===0" class="qufu-container f30 clearfix border-top">
                <div class="qu fl" style="position: relative;padding-top: 0"
                     :style="{height: height-paddingHeight + 'px'}">
                    <div v-if="!gameClients" class="text-center">
                        <mt-spinner type="triple-bounce"></mt-spinner>
                    </div>
                    <ul>
                        <li
                           @click="clientClick(item)"
                           v-for="item in gameClients"
                           :class="{selected: gameClient.id === item.id}"><span>{{item.name}}</span></li>
                        <div style="clear: both"></div>
                    </ul>
                    <div class="p-30" @click="showCustomInput = true" v-if="showCustom && custom.gameServer">
                        <span class="f26 color-m2">没找到相关区服？<br>点这提交</span>
                    </div>
                </div>
                <div class="fu bg-fff fl" style="position: relative;left: 0;padding-top: 0"
                     :style="{height: height-paddingHeight + 'px'}">
                    <div v-if="!gameServers" class="text-center mg-mt-circle">
                        <mt-spinner type="fading-circle"></mt-spinner>
                    </div>
                    <ul>
                        <li v-for="item in gameServers" @click="serverClick(item)">
                            <span class="border-bottom">{{item.name}}</span>
                        </li>
                        <li v-if="gameServers && gameServers.length === 0">暂无结果</li>
                        <div style="clear: both"></div>
                    </ul>
                </div>
            </div>
        </div>
        <!--弹框背景-->
        <div class="maskdiv" style="z-index: 500;" v-if="showCustomInput"></div>
        <!--手动输入区服弹框-->
        <div class="bomb-box bomb-qufu bg-fff" v-show="showCustomInput">
            <div class="bomb-title border-bottom">
                <h1 class="f36 color-333 text-center">手动输入区服</h1>
                <i class="bomb-close" @click="showCustomInput = false"></i>
            </div>
            <div class="bomb-content">
                <div class="bomb-input clearfix">
                    <input ref="customServerInput" class="fl f32" type="text" placeholder="请输入客服端/区服" maxlength=""
                           v-model.trim="customServer">
                </div>
                <div class="bomb-tip mt-20">
                    <p class="f26 color-666">请尽量输入完整的区服信息，方便买家购买。<br>例如：QQ(安卓)/手Q38区灵魂冲突</p>
                </div>
            </div>
            <!--灰色用rgb(187, 187, 187)；选中用class='bg-f54'-->
            <div class="bomb-commit text-center" style="background: rgb(187, 187, 187)"
                 :class="{'bg-f54': !!customServer.length}"
                 @click="commitCustomServer">
                <span class="color-fff f36">直接提交</span>
            </div>
        </div>
    </div>
</template>

<script>
  import {mapActions} from 'vuex'

  export default {
    props: ['changeSelectServerShow',
      'historyCheckedArr',
      'gameClients',
      'gameServers',
      'gameId',
      'checked',
      'custom',
      'paddingHeight',
      'showCustom'
    ],
    data() {
      return {
        width: window.innerWidth,
        height: window.innerHeight,
        loading: false, // 当为true时，代码正在发送搜索接口，防止连续两个接口同时发送
        showCustomInput: false, // 是否显示自定义区服输入框
        showInputMask: false, // 是否显示搜索框的幕布
        gameClient: null, // 备份平台，因为在这组件中切换客户端列表不代表选中该客户端
        searchList: null, // 搜索列表
        customServer: '', // 自定义区服内容
        lastInput: null, // 上一个搜索输入的内容得到的列表为空的输入内容
        searchInput: '' // 搜索输入内容
      }
    },
    mounted() {
//      console.log(this.$refs['heightElePadding'].offsetHeight)
//      console.log(this.$refs['heightElePadding'])
//      this.paddingHeight = this.$refs['heightElePadding'].offsetHeight
    },
    watch: {
      gameClients(val) {
        if (val && val.length > 0 ) {
          this.gameClient = val[0]
          if(this.$route.query.clientId) {
            this.gameClients.forEach(elem => {
              if (elem.id===this.$route.query.clientId) {
                this.gameClient = elem
              }
            })
          }
        }
      },
      customServer(val, old) {
        /* 长度限制20 */
        if (val.length > 50)
          this.customServer = old
      },
      searchInput(val, old) {
        /* 长度限制20 */
        if (val.length > 20) {
          this.searchInput = old
          return
        }
        if (val.length)
          this.searchInputChange()
        else {
          this.searchList = null
          this.lastInput = null
        }
      }
    },
    methods: {
      /* 搜索的区服点击 */
      searchServerClick(item) {
        this.searchInput = ''
        this.$emit('serverClick', {
          server: {id: item.mainServiceId, name: item.mainServiceName}, client: {
            id: item.mainAreaId,
            name: item.mainAreaName
          }
        })
      },
      goBack() {
        this.searchInput = ''
        this.changeSelectServerShow()
        this.showInputMask = false // 是否显示搜索框的幕布
      },
      historyClick(item, index) {
        this.$emit('historyClick', {item, index})
        this.showInputMask = false // 是否显示搜索框的幕布
      },
      /* 清除历史 */
      clearHistory(index) {
        this.$emit('clearHistory', index)
      },
      /* 直接提交输入框内容 */
      commitSearchInput() {
        this.showCustomInput = true
        this.customServer = this.searchInput
        this.$nextTick(() => {
          this.$refs['customServerInput'].focus()
        })
      },
      /* 输入框内容改变 */
      searchInputChange() {
        if (this.loading) return
        /* 如果上个输入的内容获取到的列表为空，则直接返回 */
        if (this.searchInput.indexOf(this.lastInput) > -1) {
          this.searchList = []
          return;
        }
        this.searchList = null
        this.loading = true
        send.call(this, this.searchInput)

        function send(str) {
          this.apiSearch({
            searchStr: str,
            gameId: this.gameId,
            platformId: this.checked.gamePlant.id
          }).then(list => {
            console.log(list)
            if (this.searchInput !== str) {
              send.apply(this, [this.searchInput])
            } else {
              this.loading = false
              if (!list.length) this.lastInput = this.searchInput
              this.searchList = list
            }
          })
        }
      },
      /* 提交自定义区服 */
      commitCustomServer() {
        if (this.customServer.length) {
          this.showCustomInput = false
          this.$emit('commitCustomServer', this.customServer)
          this.customServer = ''
          this.searchInput = ''
          this.showInputMask = false // 是否显示搜索框的幕布
        }
      },
      /* 服务器点击切换 */
      serverClick(item) {
        this.$emit('serverClick', {server: item, client: this.gameClient})
      },
      /* 客户端点击切换 */
      clientClick(item) {
        if (item !== this.gameClient) {
          this.gameClient = item
          this.$emit('clientClick', item)
        }
      },
      ...mapActions({
        apiSearch: 'MOBILE_GAME/ACTION_SEARCH_SERVER' // 搜索服务器接口
      })
    }
  }
</script>

<style scoped>
    .mg-mt-circle {
        margin-top: .2rem;
    }

    .search-result {
        position: fixed;
        top: 0;
        overflow: auto;
        /*overflow-y: auto;*/
        /*overflow-x: hidden;*/
        height: 100%;
        width: 100%;
        max-width: 768px;
        padding-top: 2.12rem;
        /*padding-bottom: .5rem;*/
    }
</style>
<style>
    .mg-mt-circle .mint-spinner-fading-circle {
        margin: 0 auto;
    }

    .mg-mt-double-bounce .mint-spinner-double-bounce {
        margin: 0 auto;
    }
</style>
<style scoped>
    .clearfix:after {
        content: '';
    }
    .bg-f54 {
        background-color: #f75e46 !important;
    }

    .mg001 .search-result ul li a {
        padding-left: 0;
    }

    .qu.fl {
        background-color: #f1f1f1;
    }
</style>
